/*
 * @Author: luojian jian.luo@macrowing.com
 * @Date: 2024-05-15 15:57:51
 * @LastEditors: luojian jian.luo@macrowing.com
 * @LastEditTime: 2024-05-24 11:44:20
 * @FilePath: \JiangHeBiWeb\src\components\jh\EdrmsHotWord\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useRef, useEffect } from 'react';
import { EdrmsHotWordStyled } from './style';
import { EdrmsTypeAndStorageDto } from '@/services/types';

import { getEdrmsHotSearchWord } from '@/services/index'

import * as echarts from 'echarts/core';
import 'echarts-wordcloud';
import { useSelector } from 'react-redux';
type EdrmsHotWordPropsType = {}

const EdrmsUseReport: React.FC<EdrmsHotWordPropsType> = () => {
    const chartRef = useRef(null);
    const [hotWprd, setHotWord] = useState<string[]>()
    const fondName = useSelector((state: any) => state.mutifonds.fondName);
    useEffect(() => {
        getEdrmsHotSearchWord().then((res:any) => { 
            // res=[
            //     {
            //         "sort": 0,
            //         "name": "题名",
            //         "number": 22,
            //         "perCentNumber": 0
            //     },
            //     {
            //         "sort": 0,
            //         "name": "1003",
            //         "number": 4,
            //         "perCentNumber": 0
            //     },
            //     {
            //         "sort": 0,
            //         "name": "测试",
            //         "number": 3,
            //         "perCentNumber": 0
            //     },
            //     {
            //         "sort": 0,
            //         "name": "seey",
            //         "number": 1,
            //         "perCentNumber": 0
            //     },
            //     {
            //         "sort": 0,
            //         "name": "seey",
            //         "number": 1,
            //         "perCentNumber": 0
            //     }
            //     ,{
            //         "sort": 0,
            //         "name": "seey",
            //         "number": 1,
            //         "perCentNumber": 0
            //     },
            //     {
            //         "sort": 0,
            //         "name": "seey",
            //         "number": 1,
            //         "perCentNumber": 0
            //     }
            //     ,{
            //         "sort": 0,
            //         "name": "seey",
            //         "number": 1,
            //         "perCentNumber": 0
            //     }
            //     ,{
            //         "sort": 0,
            //         "name": "seey",
            //         "number": 1,
            //         "perCentNumber": 0
            //     }
            //     ,{
            //         "sort": 0,
            //         "name": "seey",
            //         "number": 1,
            //         "perCentNumber": 0
            //     },
                
            // ];
            setHotWord(res);
        });

    }, [fondName])
    const option = {
        series: [{
            type: 'wordCloud',
            shape: 'circle',
            keepAspect: false,
            // maskImage: maskImage,
            left: 'center',
            top: 'center',
            width: '100%',
            height: '90%',
            right: null,
            bottom: null,
            sizeRange: [12, 60],
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            layoutAnimation: true,
            textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                color: function () {
                    // return "#fff";
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                // focus: 'self',
                textStyle: {
                    textShadowBlur: 3,
                    textShadowColor: '#333'
                }
            },
            //data属性中的value值却大，权重就却大，展示字体就却大
            data: ([
                {
                    "sort": 0,
                    "name": "题名",
                    "number": 17,
                    "perCentNumber": 0
                },
                {
                    "sort": 0,
                    "name": "测试",
                    "number": 3,
                    "perCentNumber": 0
                },
                {
                    "sort": 0,
                    "name": "1003",
                    "number": 3,
                    "perCentNumber": 0
                },
                {
                    "sort": 0,
                    "name": "seey",
                    "number": 1,
                    "perCentNumber": 0
                }
            ]).map((item, index) => { return { name: item.name, value: index * 1000 }; })


        }]

    }
    // useEffect(() => {
    //     let chart: any = null;
    //     if (chartRef.current) {
    //         // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
    //         chart = echarts.init(chartRef.current); 
    //         // 设置图表实例的配置项和数据
    //         option && chart.setOption(option,true);
    //     }
    //     return () => {

    //         //  销毁实例。实例销毁后无法再被使用
    //         chart.dispose();
    //     };
    // }, [hotWprd])
    return (
        <EdrmsHotWordStyled>
            <div ref={chartRef} style={{ width: '100%', height: '100%' }}>
                <div className='key-wrod-box'>
                    {hotWprd?.map((o: any, index: any) => {
                        return <div key={'key-wrod-hot'+index} className={'key-wrod-hot' + ' key-wrod-hot-' + index}>
                            {o.name}
                        </div>
                    })}
                </div>
            </div>

        </EdrmsHotWordStyled>
    );
};

export default EdrmsUseReport;
